<template>
    <div class="box">
        <el-row class="bread" :gutter="10">
            <el-col class="crumbBox" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/news' }">新闻资讯</el-breadcrumb-item>
                    <el-breadcrumb-item>新闻详情</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col class="newsTxt" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-col class="left" :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                    <el-col class="newsTitle" :xs="24" :sm="24" :md="24" :lg="24"
                        :xl="24">新闻资讯标题新闻资讯标题新闻资讯标题新闻资讯标新闻资讯标题新闻资讯标题新闻资讯标题新闻资讯标题新闻资讯标题新闻资讯标题新闻资讯标新闻资讯标题新闻资讯标题新闻资讯标题</el-col>
                    <el-col class="newsContent" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="content1" :xs="24" :sm="24" :md="24" :lg="24"
                            :xl="24">段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1。</el-col>
                    </el-col>
                    <el-col class="newsContent" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="content1" :xs="24" :sm="24" :md="24" :lg="24"
                            :xl="24">段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段萝2段落2段落2段落2段落2段落2段落2段落2段落2段楚2段落2段落2段落2段落2段落2段落2段段落2段落2段落2段落2段落2段落2段落2段落2段落2段萝2段楚2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段喜2段落2段落2段落2段落2段落2段落2。</el-col>
                    </el-col>
                    <el-col class="newsContent" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="content1" :xs="24" :sm="24" :md="24" :lg="24"
                            :xl="24">段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2。</el-col>
                    </el-col>
                    <el-col class="newsContent" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="content1" :xs="24" :sm="24" :md="24" :lg="24"
                            :xl="24">段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2。</el-col>
                    </el-col>
                    <el-col class="newsContent" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="content1"
                            :xl="24">段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2。</el-col>
                    </el-col>
                </el-col>
                <el-col class="right" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <el-col class="otherNews" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="otherTitle" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <span>其他资讯</span>
                        </el-col>
                        <el-col class="otherNewsTxt" :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
                            <el-col class="txt1" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                <el-col class="title" :xs="24" :sm="24" :md="24" :lg="24"
                                    :xl="24">其他行业资讯标题其他行业资讯标题其他行业资讯标题</el-col>
                                <el-col class="content" :xs="24" :sm="24" :md="24" :lg="24"
                                    :xl="24">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容闻内容新闻内容</el-col>
                                <el-col class="time" :xl="24">2024-10-20</el-col>
                            </el-col>
                            <el-col class="txt1" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                <el-col class="title" :xs="24" :sm="24" :md="24" :lg="24"
                                    :xl="24">其他行业资讯标题其他行业资讯标题其他行业资讯标题</el-col>
                                <el-col class="content" :xs="24" :sm="24" :md="24" :lg="24"
                                    :xl="24">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容闻内容新闻内容</el-col>
                                <el-col class="time" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">2024-10-20</el-col>
                            </el-col>
                            <el-col class="txt1" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                <el-col class="title" :xs="24" :sm="24" :md="24" :lg="24"
                                    :xl="24">其他行业资讯标题其他行业资讯标题其他行业资讯标题</el-col>
                                <el-col class="content" :xs="24" :sm="24" :md="24" :lg="24"
                                    :xl="24">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容闻内容新闻内容</el-col>
                                <el-col class="time" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">2024-10-20</el-col>
                            </el-col>
                        </el-col>
                    </el-col>
                    <el-col class="more" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-col class="moreTxt" :xs="10" :sm="10" :md="10" :lg="10" :xl="10"><span>查看更多</span></el-col>
                    </el-col>
                </el-col>
            </el-col>
            <el-col class="togglePage" :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
                <el-col class="prev toggleBox" :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                    <el-col class="title" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">上一篇：</el-col>
                    <el-col class="content" :xs="24" :sm="24" :md="24" :lg="24"
                        :xl="24">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</el-col>
                </el-col>
                <el-col class="next toggleBox" :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                    <el-col class="title" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">下一篇：</el-col>
                    <el-col class="content" :xs="24" :sm="24" :md="24" :lg="24"
                        :xl="24">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</el-col>
                </el-col>
            </el-col>
        </el-row>
        <div class="yd-newsDetail">
            <div class="subBox">
                <div class="bigTitle">新闻详情</div>
                <div class="newsContent">
                    <div class="title">新闻标题</div>
                    <div class="content">
                        <span>我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。</span>
                        <span>我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</span>
                        <span>我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。</span>
                        <span>我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。</span>
                        <span>我们不断投资于研发和培训，以保持在科技行业的竞争优势。</span>
                        <span>我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。</span>
                        <span>我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势。</span>
                        <span>我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。</span>
                    </div>
                </div>
                <div class="otherNews">
                    <div class="title">其他资讯</div>
                    <div class="content">
                        <div class="list">
                            <div class="item" v-for="item, index in newsList" :key="index">
                                <div class="content1">{{ item.content1 }}</div>
                                <div class="content2">{{ item.content2 }}</div>
                                <div class="time">{{ item.time }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="prevNext">
                    <div class="prev clickBox">
                        <div class="text">上一条：</div>
                        <div class="content">
                            <img src="../../../public/img/矩形 61@1x.png" alt="">
                            <div class="rig">新闻标题新闻标题新闻标题新闻标题</div>
                        </div>
                    </div>
                    <div class="next clickBox">
                        <div class="text">下一条：</div>
                        <div class="content">
                            <img src="../../../public/img/矩形 66@1x (1).png" alt="">
                            <div class="rig">新闻标题新闻标题新闻标题新闻标题</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default ({
    data() {
        return {
            newsList: [
                { content1: '我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。', content2: '我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。', time: '2024-10-20' },
                { content1: '我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。', content2: '我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。', time: '2024-10-20' },
                { content1: '我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。', content2: '我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。', time: '2024-10-20' }
            ]
        }
    }
})
</script>

<style lang="scss">
.box {
    width: 1200px;
    margin: 0 auto;

    .yd-newsDetail {
        display: none;
        width: 375px;
        background: rgb(245, 245, 245);

        .subBox {
            padding: 2px 15px 44px 15px;

            .bigTitle {
                padding: 16px 0;
                font-size: 24px;
                font-weight: bold;
                text-align: left;
            }

            .newsContent {
                margin-bottom: 15px;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                    text-align: left;
                    margin-bottom: 15px;
                }

                .content {
                    font-size: 14px;

                    span {
                        display: block;
                        text-align: left;
                        // 文字头部缩进2个字符宽度
                        text-indent: 2em;
                        line-height: 24px;
                    }
                }
            }

            .otherNews {
                text-align: left;
                margin-bottom: 15px;

                .title {
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                .content {
                    font-size: 12px;
                    color: #798099;

                    .list {
                        .item {
                            border-bottom: 1px solid #D8D8D8;
                            padding-top: 10px;

                            .content1 {
                                margin-bottom: 15px;
                            }

                            .time {
                                margin-top: 20px;
                                margin-bottom: 5px;
                                text-align: right;
                            }
                        }

                        .item:last-child {
                            border-bottom: none;
                        }
                    }
                }
            }

            .prevNext {
                .prev {
                    margin-bottom: 15px;
                }

                .clickBox {
                    width: 100%;
                    background: #fff;
                    padding-left: 5px;
                    padding-bottom: 3px;

                    .text {
                        text-align: left;
                        font-size: 12px;
                    }

                    .content {
                        display: flex;
                        margin-top: 5px;

                        img {
                            margin-right: 10px;
                        }

                        .rig {
                            font-size: 10px;
                            color: #798099;
                            padding-top: 5px;
                        }
                    }
                }
            }
        }
    }

    .bread {
        .crumbBox {
            border: 1px solid #333;
            padding: 15px 0;

            .el-breadcrumb {
                font-size: 18px;
            }

            .el-breadcrumb__inner a,
            .el-breadcrumb__inner.is-link {
                font-weight: normal !important;
            }
        }

        .newsTxt {
            margin-top: 100px;
            margin-bottom: 80px;

            .left {
                padding-top: 15px;

                .newsTitle {
                    font-size: 21px;
                    font-weight: bold;
                    color: #666;
                    text-align: left;
                    border-bottom: 1px solid #ddd;
                    padding-bottom: 20px;
                    line-height: 33px;
                }

                .newsContent {
                    font-size: 15px;
                    color: #888;
                    padding-top: 30px;
                    line-height: 30px;

                    .content1 {
                        text-align: left;
                    }
                }
            }

            .right {
                color: #999;

                .otherNews {
                    font-size: 14px;

                    .otherTitle {
                        border-bottom: 1px solid #ddd;
                        padding-bottom: 15px;
                        text-align: left;
                    }

                    .otherNewsTxt {
                        margin-left: 10px;

                        .txt1 {
                            text-align: left;
                            padding-top: 25px;
                            border-bottom: 1px solid #ddd;
                            padding-bottom: 15px;

                            .title {
                                font-size: 16px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                line-height: 30px;
                            }

                            .content {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                line-height: 30px;
                            }

                            .time {
                                font-size: 13px;
                                padding-top: 20px;
                            }
                        }
                    }
                }

                .more {
                    margin-top: 100px;

                    .moreTxt {
                        color: #1E98D7;
                        font-size: 13px;
                        border-bottom: 1px solid #1E98D7;
                        padding-bottom: 15px;
                        margin-left: 80px;
                        cursor: pointer;
                    }
                }
            }
        }

        .togglePage {
            padding: 0 !important;
            padding-left: 15px !important;
            cursor: pointer;

            .toggleBox {
                padding-right: 0 !important;
                border: 1px solid rgba(215, 215, 215);
                border-radius: 10px;
                background: rgba(215, 215, 215);
                padding: 15px 0 25px 20px !important;
                text-align: left;

                .title {
                    color: #888;
                    margin-bottom: 20px;
                }

                .content {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .toggleBox:hover {
                background: #fff;
                color: #1E98D7 !important;
            }

            .toggleBox:hover .title {
                color: #1E98D7 !important;
            }

            .prev {
                margin-right: 80px;
            }
        }
    }

    @media screen and (max-width: 750px) {
        .bread {
            display: none;
        }

        .yd-newsDetail {
            display: block;
        }
    }
}
</style>
